<!--数据表格-->
<template>
  <div>
    <el-header>
      <el-card style="width: 100%;margin: 5px auto;">
        <div class="block">
          <span >  使 用 部 位： </span>
          <el-input
            v-model="searchPurpose"
            size="mini"
            placeholder="输入使用部位进行搜索"
            clearable
            style="width: 200px;"
          />
          <span style="margin-left: 100px">  部 门： </span>
          <el-autocomplete
            v-model="searchDepart"
            size="mini"
            clearable
            :fetch-suggestions="querySearchAsync"
            placeholder="选择部门进行搜索"
            @select="handleSelect"
          ></el-autocomplete>
        </div>
        <div class="block" style="margin-top: 10px">
          <span class="demonstration">  日 期： </span>
          <el-date-picker
            v-model="searchDate"
            value-format="yyyy-MM"
            type="month"
            size="mini"
            placeholder="选择月">
          </el-date-picker>
          <el-button
            size="mini"
            type="primary"
            style="margin-left: 140px"
            @click="handleSelectCost(searchPurpose, searchDepart, searchDate)"
          >查 询</el-button>
          <el-tag type="info" style="margin-left: 100px">成 本 核 算：{{ costResult }}</el-tag>
        </div>
      </el-card>
    </el-header>
    <el-card class="member-box-card">
      <el-table id="member-table" ref="memberTable" :key="itemKey" v-loading="loading" stripe border height="700" style="width: 100%" :data="tableData">
        <el-table-column
          prop="id"
          label="领用编号"
        />
        <el-table-column
          prop="name"
          label="物料名称"
        />
        <el-table-column
          prop="department"
          label="部门"
        />
        <el-table-column
          prop="purpose"
          label="使用部位"
        />
        <el-table-column
          prop="price"
          label="单价"
        />
        <el-table-column
          prop="tax"
          label="税率"
        />
        <el-table-column
          prop="num"
          label="出库数量"
        />
        <el-table-column
          prop="time"
          label="出库时间"
        />
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { getToken } from '@/utils/auth'
import { selCostByOpti, selAllDepName } from '@/api/check-report/cost'

export default {
  data() {
    return {
      tableData: [], // 表格数据
      departName: [], // 获取所有部门名称
      editFormVisible: false,
      insFormVisible: false,
      searchPurpose: '', // 输入条件使用部位
      searchDate: '', // 输入条件日期部门名称
      searchDepart: '', // 输入部门名称
      costResult: '', // 获取成本核算结果
      itemKey: '',
      loading: false,
      headers: {
        Authorization: getToken()
      }
    }
  },
  created() {
    this.getAllDepartName()
  },
  methods: {
    searchHandler() {
      return this.tableData.filter(data => !this.search || data.closingDate.toLowerCase().includes(this.search.toLowerCase()))
    },
    getAllDepartName() {
      selAllDepName().then((res) => {
        this.departName = res.data
      })
    },
    querySearchAsync(queryString, callback) {
      // console.log('material1:' + this.materialNameDatas)
      var datas = this.departName
      var results = queryString ? datas.filter(this.createStateFilter(queryString)) : datas
      var result = []
      for (var i = 0; i < results.length; i++) {
        result.push({ 'value': results[i].departName })
        // console.log('material2:' + results[i].materialName)
      }
      // console.log('material3:' + result)
      clearTimeout(this.timeout)
      this.timeout = setTimeout(() => {
        callback(result)
      }, 3000 * Math.random())
    },
    createStateFilter(queryString) {
      return (state) => {
        // console.log('state:' + state.name)
        return (state.departName.toLowerCase().indexOf(queryString.toLowerCase()) > -1)
      }
    },
    handleSelect(item) {
      console.log(item)
    },
    handleSelectCost(purpose, department, date) {
      var year = ''
      var month = ''
      if (date !== '') {
        year = date.toString().substring(0, 4)
        month = date.toString().substring(5)
      }
      this.loading = true
      selCostByOpti(purpose, department, year, month).then((res) => {
        this.costResult = res.message
        this.tableData = res.data
        this.loading = false
        this.itemKey = Math.random()
      }).catch((error) => {
        console.log(error)
      })
    }
  }
}
</script>

<style>
.member-box-card {
  width: 95%;
  margin: 60px auto;
}
#member-table {
  margin-top: 5px;
}
</style>
